<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- navigator 包含有关浏览器的信息-->

    <div id="demo"></div>
    <div id="google_geo" style="width:200px;height:200px;"></div>
    

    <script src="./js/jquery-3.2.1.js"></script>
    <script>
        var model = (function () {

            function getLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition, showError);
                } else {
                    alert('浏览器不支持定位');
                }
            };

            function showError(error) {
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        alert("定位失败,用户拒绝请求地理定位");
                        break;
                    case error.POSITION_UNAVAILABLE:
                        alert("定位失败,位置信息是不可用");
                        break;
                    case error.TIMEOUT:
                        alert("定位失败,请求获取用户位置超时");
                        break;
                    case error.UNKNOWN_ERROR:
                        alert("定位失败,定位系统失效");
                        break;
                }
            };

            function showPosition(position) {
                var lat = position.coords.latitude; //纬度 
                var lag = position.coords.longitude; //经度 
                var pun = document.getElementById('demo');
                pun.innerHTML = '纬度:' + lat + ',经度:' + lag;
            }

            //利用谷歌地图的接口，显示街道的详细信息
            // function showPosition(position) {
            //     var lat = position.coords.latitude;
            //     var lag = position.coords.longitude;
            //     var latlog = lat + ',' + lag;
            //     var url = 'http://maps.google.cn/maps/api/geocode/json?latlng=' + latlog + '&language=CN';
            //     $.ajax({
            //         type: "GET",
            //         url: url,
            //         async: true,
            //         beforeSend: function () {
            //             $("#google_geo").html('正在定位...');
            //         },
            //         success: function (json) {
            //             var results = json.results;
            //             $.each(results, function (index, array) {
            //                 if (index == 0) {
            //                     $("#google_geo").html(array['formatted_address']);
            //                 }
            //             });
            //         },
            //         error: function (XMLHttpRequest, textStatus, errorThrown) {
            //             $("#google_geo").html(latlon + "地址位置获取失败");
            //         }
            //     });
            // }

            return {
                getLocation: getLocation
            }
        })()

        model.getLocation();
    </script>
</body>

</html>